<template>
    <teleport to='body'>
        <div v-if="isLocked" class="lock-screen">
            <div class="main-box">
                <el-image 
                    style="width: 8vw; height: 8vw; box-sizing: border-box; border-radius: 50%;" 
                    :src="avatarImage" 
                    fit="fill" 
                />
                <el-icon 
                    size="30"
                    style="padding: 1vw 0;"
                >
                    <Lock />
                </el-icon>
                <div style="font-size: 1vw; padding: 1vw 0;">Vue Admin 屏幕已锁定</div>
                <el-form 
                    ref="formRef"
                    :model="formData" 
                    :rules="rules"
                    inline
                    label-width="0"
                    style="width: 15vw;"
                >
                    <el-form-item 
                        label=""
                        prop="password"
                        style="margin-right: 0;"
                    >
                        <div style="display: flex; justify-content: center;">
                            <el-input 
                                v-model="formData.password" 
                                clearable
                                show-password
                                placeholder="请输入密码123456"
                                style="width: 100%;"
                            />
                            <el-button 
                                type="primary" 
                                @click="onSubmit(formRef)"
                            >
                                解锁
                            </el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </teleport>
</template>
<script setup lang="ts">
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import {
        Lock,
    } from '@element-plus/icons-vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const { isLocked } = storeToRefs(store)
	const avatarImage = new URL('@/assets/img/avatar/avatar.png', import.meta.url).href
	// const avatarImage: Raw<any[]> = markRaw([new URL('@/assets/img/avatar/avatar.png', import.meta.url).href])
	// const isLocked: Ref<boolean> = ref(false)
    const formRef: Ref<any> = ref(null)
    const formData: Ref<any> = ref({
        password: '123456',
    })
    
    const rules: any = reactive({
        password: [
            { 
                required: true,
                message: '请输入解锁密码', 
                trigger: 'blur' 
            },
        ],
    })

    const onSubmit = async (formEl: any) => {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
            if (valid) {
                if (formData.value.password == '123456') {
                    isLocked.value = false
                    console.log('submit!')
                } else {
                    console.log('error submit!')
                }
            } else {
                console.log('error submit!', fields)
            }
        })
    }
        
</script>
<style scoped lang="scss">
    .lock-screen {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        // background-color: rgba(0, 0, 0, 0.8);
        // filter: blur(10px);
        backdrop-filter: blur(5px);
        background: url(@/assets/img/bg/bg-1.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }
    .main-box {
        width: 600px;
        height: 500px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>

